import AppBreadcrumb from "@/components/app-breadcrumb";
import { AppSidebar } from "@/components/app-sidebar";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";

const Layout = ({ children }: { children: React.ReactNode }) => {
  return (
    <SidebarProvider className="h-full">
      <AppSidebar />
      <SidebarInset className="bg-slate-50">
        <header className="flex h-14 shrink-0 items-center gap-2 rounded-t-xl">
          <div className="flex items-center gap-2 px-4">
            <SidebarTrigger className="-ml-1" />
            <Separator orientation="vertical" className="mr-2 h-4" />
            <AppBreadcrumb />
          </div>
        </header>
        <Separator />
        <ScrollArea className="p-2 h-full">{children}</ScrollArea>
      </SidebarInset>
    </SidebarProvider>
  );
};

export default Layout;
